<template>
	<div class="content-set">
        <!-- 内容设置 -->
        <div  class="tab-content">
            <div class="form-item-box clearfix">
                <div class="form-item-left require-item">活动名称:</div>
                <div class="form-item-right">
                    <input type="text" maxlength="10" v-model="$store.state.content.name">
                </div>
            </div>
            <div class="form-item-box clearfix">
                <div class="form-item-left require-item">活动时间:</div>
                <div class="form-item-right pick-date-box">
                    <el-date-picker
                        v-model="$store.state.content.startTime"
                        type="datetime"
                        :picker-options="pickerOptions"
                        placeholder="选择开始时间">
                    </el-date-picker><span class="separate-box">至
                    </span><el-date-picker
                        v-model="$store.state.content.endTime"
                        type="datetime"
                        :picker-options="pickerOptions"
                        placeholder="选择结束时间">
                    </el-date-picker>
                </div>
            </div> 

            <div class="form-item-box clearfix" v-show="tplType=='multiple-vote'">
                <div class="form-item-left">&nbsp;&nbsp;</div>
                <div class="form-item-right lotteryNum-box">
                    <span class="separate-box float-left">每次最多投</span>
                    <input class="input-lottery float-left" type="text" min="1" v-model="$store.state.content.votesNum" >
                    <span class="separate-box float-left">票</span>
                </div>
            </div>

            <div class="form-item-box clearfix">
                <div class="form-item-left require-item">活动次数:</div>
                <div class="form-item-right lotteryNum-box">
                    <span class="separate-box float-left">每人可参与
                    </span><input class="input-lottery float-left" type="text" min="1" v-model="$store.state.content.lotteryNum" ><el-select v-model="$store.state.content.tagDetailValue" class="float-left">
                        <el-option
                            v-for="item in lotteryNumOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                        </el-select>
                </div>
            </div>
            <div class="form-item-box clearfix">
                <div class="form-item-left">活动背景:</div>
                <div class="form-item-right rule-box">
                    <div style="display:inline-block; vertical-align: middle;">
						<div class="upload-img-list">
							<p  v-show="!$store.state.content.backgroundImg" >
								<input type="file" 
							       @change='addImgEvent'
							       accept="image/png, image/jpeg, image/jpg"
                                   v-show="!ImportCodeLoading"> 
                                <img v-show="ImportCodeLoading" class="load-gif" src="./../../../assets/img/qr_code.gif">
							</p>
							<p v-show="$store.state.content.backgroundImg" class="p_img">
								<img :src="$store.state.content.backgroundImg" />
								<i class="fa fa-times" 
								aria-hidden="true"
								v-show="$store.state.content.backgroundImg"  @click="cancelBanner()"></i>
							</p>
						</div>
						<p style="font-size:12px;">支持640*1200像素，PNG、JPG格式，小于200KB</p>
					</div>
                </div>
            </div>
            <div class="form-item-box clearfix last-item">
                <div class="form-item-left require-item">活动规则:</div>
                <div class="form-item-right rule-box">
                    <quill-editor 
                            v-model="$store.state.content.description"
                            ref="myQuillEditor"
                            class="editer"
                            :options="editorOption"
                            @ready="onEditorReady($event)">
                    </quill-editor>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
	import { quillEditor } from 'vue-quill-editor'
	import { baseImgPath } from './../../../config/env'
	import * as api from './../../../api/api';
	import Vue from 'vue'
	import { Message,Loading} from 'element-ui';    
	export default {
        props:{
            tplType:{
                type:String,
                default:''
            }
        },
		data(){
			return {
                pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					}
				},
                editorOption: {
			        
		        },
                lotteryNumOptions: [{
		          value: 'all',
		          label: '次/活动全程'
		        },{
		          value: 'day',
		          label: '次/每日'
		        }],
                ImportCodeLoading:false, //上传图片
            }
		},
		watch:{
			
		},
		mounted(){
		
		},
		components: {
			quillEditor
		},
        computed: {
            editor() {
	        	return this.$refs.myQuillEditor.quill;
	      	},
        },
        methods: {
			onEditorReady(editor) {
		        console.log('editor ready!', editor)
		    },
            //删除选择的图片
			cancelBanner(){
                this.$store.state.content.backgroundImg= '';
			},
			//上传图片
			addImgEvent(event){
				var vm = this;
				vm.ImportCodeLoading=true;
	            var img1 = event.target.files[0];
				//生成临时图片路径
                var temSrc = URL.createObjectURL(img1);
	            var size = img1.size/1024;
				if(size>300){
					vm.ImportCodeLoading=false;
					vm.$message({
					showClose: true,
					type: 'error',
					message: '图片大小不能大于200KB'
					}); 
					return false;  
				}
				var _img = new Image();
        		_img.onload = function  () { 
        			var imgWidth = _img.width,
        				imgHeight = _img.height; 
					if (imgWidth!=640 || imgHeight!=1200) {
						vm.ImportCodeLoading=false;
						vm.$message({
							showClose: true,
							type: 'error',
							message: '请上传尺寸为640*1200的图片'
						}); 
						return false;
					}; 
					let formdata = new FormData();
					formdata.append('upfile', img1);
                    api.tmpPloadImg(formdata).then(res => {
                        vm.$message({
                            message: '上传成功',
                            type: 'success'
                        }); 
                        vm.ImportCodeLoading=false;
                        vm.$store.state.content.backgroundImg= res.data.result.url;
                        vm.$store.state.content.upBgImg= res.data.result.original;
                    }).catch(err=>{
                        vm.httpStatusCode(err); 
                        vm.ImportCodeLoading=false;
                    })   
					setTimeout(function  () {
			        	URL.revokeObjectURL(temSrc);
			        },100);
				}
				_img.src = temSrc;
                event.target.value='';
			}
        }
	}
</script>
<style>
	/* 修改输入框样式 */
	.pick-date-box .el-input__inner{
		height: 34px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 100%;
        height: 34px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-input__inner{
		height: 32px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 109px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-date-editor i{
		display: none;
	}
	.special-item .el-select .el-input__inner{
		padding-right: 25px;
		width:130px;
	}
	.lotteryNum-box .el-input__inner{
		width:142px;
		box-sizing: border-box;
		border-radius: 0;
		height: 34px;
		font-size: 12px;
	    color: rgb(136, 136, 136);
	    border-color: rgb(239, 239, 239);
	    background-color: rgb(238, 238, 238);
	}
	.tag-box .el-input__inner{
		width:160px;
	}
	.tag-box .el-input{
	}
	.rule-box .ql-container{
		height: 300px;
		background: #f4f8fb;
	}
	.share-switch .el-switch{
		position: relative;
		top:-1px;
	}
	.rule-title .el-switch{
		top:-1px;
		left: 10px;
	}
	.el-switch__label span{
		color:rgba(0,0,0,0);
	}
</style>
<style lang="less" scoped>
	@import '../../../style/setTemplate'; 
    .upload-img-list p{
        width:100px;
        height: 100px;
        line-height: 98px;
        border: 1px solid #eeeeee;
        margin: 0 10px 20px;
        text-align: center;
        font-size: 30px;
        color: #aaaaaa;
        position: relative; 
        .load-gif{
            position:absolute;
            top:35px;
            left:35px;
            width:25px;
            height:25px;
        }
    }
    .upload-img-list p:first-child{
        position: relative;
    }
    .upload-img-list p:first-child:before{
        content:'+';
    }
    .upload-img-list p input{
        cursor: pointer;
        display: block;
        opacity: 0;
        width:100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
    }
    .upload-img-list p:not(:first-child){
        -webkit-background-size: contain;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .upload-img-list .p_img{
        position:relative;
        border:none;
        width:56px;
    }
    .upload-img-list p img{
        width:100%;
        height: 100%;
    }
    .upload-img-list .p_img .fa-times{
        position: absolute;
        top: 0 !important;
        right:-13px;
        font-size: 14px;
        color:#888888;
        cursor: pointer;
    }
    .upload-img-list .p_img .fa-times:hover{
        opacity: 0.8;
    }
</style>